/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form,  Input ,InputNumber,Radio,TreeSelect,Select,Collapse,Button,message,Card,Icon,Row,Col} from 'antd';
import {connect} from 'dva';
import './index.less'
import request from '@/utils/request';
import Highlighter from "react-highlight-words";
import find from 'lodash/find';

const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const Panel = Collapse.Panel;
let uuid=1;
class EditUserArchives extends Component {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.state = {
      meterArr:[uuid],
      meterActiveKey:['1'],
      editRecord:{region:{}}
    };
  }


  componentDidMount() {
    const that=this;
  }
  addMeter=()=>{
    uuid++;
    this.state.meterArr.push(uuid)
    this.state.meterActiveKey.push(uuid.toString())
    this.setState({
      meterArr:this.state.meterArr,
      meterActiveKey:this.state.meterActiveKey
    })
  }
  deleteMeter=(item)=>{
    console.log('删除的item',item)
    if(this.state.meterArr.length===1){
      console.log('只有一个水表')
      message.error('至少需要一个水表')
      return false
    }
    const index=this.state.meterArr.indexOf(item);
    console.log('index',index)
    this.state.meterArr.splice(index, 1);
    this.setState({
      meterArr:this.state.meterArr
    })
  }
  renderTreeNodes=(data)=>{

    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode value={`${item.id}$${item.name}`} title={item.name} key={item.id} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return  <TreeNode value={item.id}  title={item.name} key={item.id} />
    });
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      }
    };
    const formItemLayoutWithLabel2 = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 20},
      }
    };
    const {getFieldDecorator, getFieldValue} = this.props.form;
    const company_code = sessionStorage.getItem('company_code');

    // const meterForms=this.state.meterArr.map((item,index)=>{
    //   const hasInit=this.props.editRecord?(this.state.editRecord.accounts&&index<this.state.editRecord.accounts.length):false
    //   return (
    //     <Col  span={8} key={index}>
    //     <Card  size="small"
    //            title={<div>水表-{index+1}  <Button disabled={this.props.editRecord&&this.state.editRecord.accounts&&index<this.state.editRecord.accounts.length} onClick={(e)=>{e.stopPropagation();this.deleteMeter(item)}}
    //                                                                                size="small" style={{float:'right',marginRight:'10px'}} type="danger">删除</Button>  </div>}
    //            key={item.toString()} >
    //       <Form key={index}>
    //         <FormItem
    //           label={'水表号'}
    //           {...formItemLayoutWithLabel2}
    //         >
    //           {getFieldDecorator(hasInit?`meter_number+${item}`:`meter_number-${item}`, {
    //             initialValue: hasInit?this.state.editRecord.accounts[index].meter_number:'',
    //             rules: [{required: true, message:""}],
    //           })(
    //             <Input  disabled={this.props.editRecord&&this.state.editRecord.accounts&&index<this.state.editRecord.accounts.length}/>
    //           )}
    //         </FormItem>
    //         <FormItem
    //           label={'用水性质'}
    //           {...formItemLayoutWithLabel2}
    //         >
    //           {getFieldDecorator(hasInit?`price_nature_id+${item}`:`price_nature_id-${item}`, {
    //             rules: [{required: true, message:""}],
    //             initialValue: hasInit?this.state.editRecord.accounts[index].price_nature.id:'',
    //
    //           })(
    //             <Select  disabled={this.props.editRecord&&this.state.editRecord.accounts&&index<this.state.editRecord.accounts.length}>
    //               {
    //                 this.props.price_nature.map((item,index)=>{
    //                   return <Option key={index} value={item.id}>{item.name}</Option>
    //                 })
    //               }
    //             </Select>
    //           )}
    //         </FormItem>
    //         <FormItem
    //           label={'计费状态'}
    //           {...formItemLayoutWithLabel2}
    //         >
    //           {getFieldDecorator(hasInit?`billing_status+${item}`:`billing_status-${item}`, {
    //             initialValue: hasInit?this.state.editRecord.accounts[index].billing_status.toString():'1',
    //
    //           })(
    //             <Select  disabled={this.props.editRecord&&this.state.editRecord.accounts&&index<this.state.editRecord.accounts.length}>
    //               {
    //                 [{key:'-1',value:'不计费'},{key:'1',value:'计费'}].map((item,index)=>{
    //                   return <Option key={index} value={item.key}>{item.value}</Option>
    //                 })
    //               }
    //             </Select>
    //           )}
    //         </FormItem>
    //         <FormItem
    //           label={'欠费关阀'}
    //           {...formItemLayoutWithLabel2}
    //         >
    //           {getFieldDecorator(hasInit?`arrears_status+${item}`:`arrears_status-${item}`, {
    //             initialValue: hasInit?this.state.editRecord.accounts[index].arrears_status.toString():'-1',
    //
    //           })(
    //             <Select  disabled={this.props.editRecord&&this.state.editRecord.accounts&&index<this.state.editRecord.accounts.length}>
    //               {
    //                 [{key:'-1',value:'不启用'},{key:'1',value:'启用'}].map((item,index)=>{
    //                   return <Option key={index} value={item.key}>{item.value}</Option>
    //                 })
    //               }
    //             </Select>
    //           )}
    //         </FormItem>
    //         <FormItem
    //           label={'余额报警'}
    //           {...formItemLayoutWithLabel2}
    //         >
    //           {getFieldDecorator(hasInit?`balance_alarm_status+${item}`:`balance_alarm_status-${item}`, {
    //             initialValue: hasInit?this.state.editRecord.accounts[index].balance_alarm_status.toString():'1',
    //           })(
    //             <Select  disabled={this.props.editRecord&&this.state.editRecord.accounts&&index<this.state.editRecord.accounts.length}>
    //               {
    //                 [{key:'-1',value:'不报警'},{key:'1',value:'报警'}].map((item,index)=>{
    //                   return <Option key={index} value={item.key}>{item.value}</Option>
    //                 })
    //               }
    //             </Select>
    //           )}
    //         </FormItem>
    //         <FormItem
    //           label={'报警金额'}
    //           {...formItemLayoutWithLabel2}
    //         >
    //           {getFieldDecorator(hasInit?`balance_alarm_amount+${item}`:`balance_alarm_amount-${item}`, {
    //             initialValue: hasInit?this.state.editRecord.accounts[index].balance_alarm_amount:'20',
    //
    //           })(
    //             <Input  disabled={this.props.editRecord&&this.state.editRecord.accounts&&index<this.state.editRecord.accounts.length}/>
    //           )}
    //         </FormItem>
    //         <FormItem
    //           label={'备注'}
    //           {...formItemLayoutWithLabel2}
    //         >
    //           {getFieldDecorator(hasInit?`remark+${item}`:`remark-${item}`, {
    //             initialValue: hasInit?this.state.editRecord.accounts[index].remark:'',
    //
    //           })(
    //             <Input  disabled={this.props.editRecord&&this.state.editRecord.accounts&&index<this.state.editRecord.accounts.length}/>
    //           )}
    //         </FormItem>
    //
    //       </Form>
    //     </Card>
    //     </Col>
    //   )
    // })
    const username = sessionStorage.getItem('username')
    console.log('(username!==\'amwares\'||username!==\'唐永臻\')',(username!=='amwares'||username!=='唐永臻'))
    return (
      <div>

        <Collapse activeKey={['1','2','3']} >
          <Panel header={'户主基本信息'} key="1" showArrow={false}>
            <Form onSubmit={this.handleSubmit}>
              <FormItem
                style={{width:'33%',display:'inline-block'}}
                label={'户主姓名'}
                {...formItemLayoutWithLabel}
              >
                {getFieldDecorator('name', {
                  rules: [{required: true, message:"户主姓名不能为空"}],
                    initialValue: this.props.editRecord? this.props.editRecord.name:'',
                })(
                  <Input  />
                )}
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
                label={'户主手机'}>
                {getFieldDecorator('mobile', {
                  initialValue: this.props.editRecord? this.props.editRecord.mobile:'',
                })(
                  <Input  />
                )}
              </FormItem>
              <FormItem
                label={'身份证号码'}
                style={{width:'33%',display:'inline-block'}}
                {...formItemLayoutWithLabel}
              >
                {getFieldDecorator('identity_number', {
                  initialValue: this.props.editRecord? this.props.editRecord.identity_number:'',
                })(
                  <Input />
                )}
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
                label={(
                  <span>
             所属区域
            </span>
                )}>
                {getFieldDecorator('region_id', {
                  rules: [{required: true, message:""}],
                  initialValue: this.props.editRecord?this.props.editRecord.region.id+'$'+this.props.editRecord.region.name:'',
                })(
                  <TreeSelect
                    treeDefaultExpandAll
                    allowClear
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                    showSearch
                  >
                    {this.renderTreeNodes(this.props.data)}
                  </TreeSelect>
                )}
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
                label={'户主地址'}
              >
                {getFieldDecorator('address', {
                  initialValue: this.props.editRecord? this.props.editRecord.address:'',
                })(
                  <Input />
                )}
              </FormItem>
              <FormItem
              label={'人数'}
              {...formItemLayoutWithLabel}
              style={{width:'33%',display:'inline-block'}}
            >
              {getFieldDecorator(`people_number`, {
                initialValue: this.props.editRecord?this.props.editRecord.people_number:3,

              })(
                <InputNumber style={{width:'100%'}} min={1} step={1}/>
              )}
            </FormItem>
              <FormItem
                label={'户主性质'}
                {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
              >
                {getFieldDecorator(`account_nature`, {
                  initialValue: this.props.editRecord?this.props.editRecord.account_nature:'',
                  rules: [{required: true, message:"户主性质不能为空"}],
                })(
                  <Select  >
                    {
                      [{key:'个人',value:'个人'},{key:'个体工商户',value:'个体工商户'},
                        {key:'企业',value:'企业'},{key:'政府机关',value:'政府机关'},{key:'教育系统',value:'教育系统'},
                        {key:'医疗机构',value:'医疗机构'},{key:'事业单位',value:'事业单位'},
                        {key:'军队',value:'军队'},{key:'社会团体',value:'社会团体'},
                        {key:'国防机构',value:'国防机构'}, {key:'集体经济',value:'集体经济'},{key:'宗教团体',value:'宗教团体'},
                        {key:'民办非企业单位',value:'民办非企业单位'},{key:'律师执业机构',value:'律师执业机构'},
                        {key:'基金会',value:'基金会'},{key:'公正机构',value:'公正机构'},
                        {key:'外国在华文化中心',value:'外国在华文化中心'},{key:'群众性团体组织',value:'群众性团体组织'},
                        {key:'司法鉴定机构',value:'司法鉴定机构'},{key:'仲裁机构',value:'仲裁机构'},
                        {key:'境外机构',value:'境外机构'},{key:'其他',value:'其他'}].map((item,index)=>{
                        return <Option key={index} value={item.key}>{item.value}</Option>
                      })
                    }
                  </Select>
                )}
              </FormItem>
              <FormItem
                label={'备注'}
                {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
              >
                {getFieldDecorator(`remark`, {
                  initialValue: this.props.editRecord?this.props.editRecord.remark:'',

                })(
                  <Input/>
                )}
              </FormItem>
              <FormItem
                label={'旧系统表号'}
                {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
              >
                {getFieldDecorator(`old_meter_number`, {
                  initialValue: this.props.editRecord?this.props.editRecord.old_meter_number:'',

                })(
                  <Input/>
                )}
              </FormItem>
            </Form>
          </Panel>
          <Panel header={'绑定水表'} key="2" showArrow={false} >
            <Form>
              <FormItem
                label={'水表号'}
                {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
              >
                {getFieldDecorator(`meter_number`, {
                  initialValue:  this.props.editRecord? this.props.editRecord.meter_number:'',
                  rules: [{required: true, message:"水表号不能为空"}],
                })(
                  <Input disabled={this.props.editRecord&&!find(this.permissions, { name: 'meter_number_edit' })}/>
                )}
              </FormItem>
              <FormItem
                label={'用水性质'}
                     {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
                help={this.props.editRecord?'修改此处不会改变历史扣费':''}
              >
                {getFieldDecorator(`price_nature_id`, {
                  rules: [{required: true, message:""}],
                  initialValue: this.props.editRecord?this.props.editRecord.price_nature.id:'',

                })(
                  <Select  >
                    {
                      this.props.price_nature.map((item,index)=>{
                        return <Option title={item.name} key={index} value={item.id}>
                          <Highlighter
                            highlightClassName="YourHighlightClass"
                            searchWords={["有下水"]}
                            highlightStyle={{backgroundColor:'#fdffd0',padding:'0'}}
                            autoEscape={true}
                            textToHighlight= {item.name}
                          /></Option>
                      })
                    }
                  </Select>
                )}
              </FormItem>
              <FormItem
                label={'计费状态'}
                     {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
              >
                {getFieldDecorator(`billing_status`, {
                  initialValue: this.props.editRecord?this.props.editRecord.billing_status.toString():'1',

                })(
                  <Select >
                    {
                      [{key:'-1',value:'不计费'},{key:'1',value:'计费'}].map((item,index)=>{
                        return <Option key={index} value={item.key}>{item.value}</Option>
                      })
                    }
                  </Select>
                )}
              </FormItem>
              <FormItem
                label={'欠费关阀'}
                     {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
              >
                {getFieldDecorator(`arrears_status`, {
                  initialValue: this.props.editRecord?this.props.editRecord.arrears_status.toString():'-1',

                })(
                  <Select  >
                    {
                      [{key:'-1',value:'不启用'},{key:'1',value:'启用'}].map((item,index)=>{
                        return <Option key={index} value={item.key}>{item.value}</Option>
                      })
                    }
                  </Select>
                )}
              </FormItem>
              <FormItem
                label={'余额报警'}
                     {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
              >
                {getFieldDecorator(`balance_alarm_status`, {
                  initialValue: this.props.editRecord?this.props.editRecord.balance_alarm_status.toString():'1',
                })(
                  <Select  >
                    {
                      [{key:'-1',value:'不报警'},{key:'1',value:'报警'}].map((item,index)=>{
                        return <Option key={index} value={item.key}>{item.value}</Option>
                      })
                    }
                  </Select>
                )}
              </FormItem>
              <FormItem
                label={'报警金额'}
                     {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
              >
                {getFieldDecorator(`balance_alarm_amount`, {
                  initialValue: this.props.editRecord?this.props.editRecord.balance_alarm_amount:'20',

                })(
                  <Input />
                )}
              </FormItem>
            </Form>



          </Panel>
          <Panel header={'开票信息'} key="3" showArrow={false}>
            <Form onSubmit={this.handleSubmit}>
              <FormItem
                style={{width:'33%',display:'inline-block'}}
                label={'购方名称'}
                {...formItemLayoutWithLabel}
              >
                {getFieldDecorator('buyer_name', {
                  initialValue: this.props.editRecord? this.props.editRecord.buyer_name:'',
                })(
                  <Input  />
                )}
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
                label={'购方税号'}>
                {getFieldDecorator('buyer_tax_number', {
                  initialValue: this.props.editRecord? this.props.editRecord.buyer_tax_number:'',

                })(
                  <Input  />
                )}
              </FormItem>
              <FormItem
                label={'购方地址'}
                style={{width:'33%',display:'inline-block'}}
                {...formItemLayoutWithLabel}
              >
                {getFieldDecorator('buyer_address', {
                  initialValue: this.props.editRecord? this.props.editRecord.buyer_address:'',

                })(
                  <Input />
                )}
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel2}
                style={{width:'66%',display:'inline-block'}}
                label={'购方银行账户'}
              >
                {getFieldDecorator('buyer_bank_account', {
                  initialValue: this.props.editRecord? this.props.editRecord.buyer_bank_account:'',

                })(
                  <Input />
                )}
              </FormItem>

              <FormItem
                style={{width:'33%',display:'inline-block'}}
                label={'购方电话'}
                {...formItemLayoutWithLabel}
              >
                {getFieldDecorator('buyer_telephone', {
                  initialValue: this.props.editRecord? this.props.editRecord.buyer_telephone:'',

                })(
                  <Input />
                )}
              </FormItem>
              <FormItem
                label={'发票推送手机'}
                style={{width:'33%',display:'inline-block'}}
                {...formItemLayoutWithLabel}
              >
                {getFieldDecorator('invoice_push_mobile', {
                  initialValue: this.props.editRecord? this.props.editRecord.invoice_push_mobile:'',

                })(
                  <Input />
                )}
              </FormItem>
              <FormItem
                label={'发票推送邮箱'}
                style={{width:'33%',display:'inline-block'}}
                {...formItemLayoutWithLabel}
              >
                {getFieldDecorator('invoice_push_email', {
                  initialValue: this.props.editRecord? this.props.editRecord.invoice_push_email:'',

                })(
                  <Input />
                )}
              </FormItem>
            </Form>
          </Panel>
        </Collapse>
      </div>
    );
  }
}

const EditUserArchivesFormWrap = Form.create()(EditUserArchives);
export default connect()(EditUserArchivesFormWrap);
